<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/meta :: meta"></head>
<body class="gray-bg">
<form id="ec" th:action="@{/role}" method="post">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <table class="table form-table margin-bottom10">
                            <tr>
                                <td>
                                    <input type="text" name="roleName" th:value="${#maps.containsKey(filters, 'roleName')} ? ${filters.roleName} : ''" placeholder="角色名称" class="input-sm form-control"/>
                                </td>
                            </tr>
                        </table>
                        <div>
                            <button type="button" class="btn btn-sm btn-primary" onclick="javascript:document.forms.ec.pageNum.value=1;document.forms.ec.submit();">搜索</button>
                            <button type="button" class="btn btn-sm btn-primary create">新增</button>
                            <button type="button" id="loading-example-btn" onclick="javascript:window.location.reload();" class="btn btn-white btn-sm">刷新</button>
                        </div>
                        <table class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>角色名称</th>
                                <th>角色编码</th>
                                <th>描述</th>
                                <th>创建时间</th>
                                <th>操作 </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="gradeX" th:each="item,it : ${page.list}">
                                <td class="text-center" th:text="${it.count}">11</td>
                                <td th:text="${item.roleName}">22</td>
                                <td th:text="${item.roleCode}">33</td>
                                <td th:text="${item.description}">33</td>
                                <td th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}" >33</td>
                                <td class="text-center">
                                    <a class="edit" th:attr="data-id=${item.id}">修改</a>
                                    <a class="delete" th:attr="data-id=${item.id}">删除</a>
                                    <a class="assgin" th:attr="data-id=${item.id}">分配权限</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="row" th:include="common/pagination :: pagination"></div>
                        <!--<div class="row">
                            <input type="hidden" name="pageSize" id="pageSize" th:value="${page.pageSize}"/>
                            <input type="hidden" name="pageNum" id="pageNum" th:value="${page.pageNum}"/>
                            <div class="col-sm-6">
                                <div class="dataTables_info" id="DataTables_Table_0_info" role="alert" aria-live="polite" aria-relevant="all">
                                    当前第<span th:text="${page.pageNum }"></span>页/共<span th:text="${page.pages }"></span>页&nbsp;&nbsp;共<span
                                        id="pageTotal" th:text="${page.total }"></span>条记录&nbsp;&nbsp;
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
                                    <ul class="pagination">
                                        <li class="paginate_button previous" th:if="${!page.isFirstPage}"><a
                                                href="javascript:document.forms.ec.pageNum.value=1;document.forms.ec.submit();">第一页</a></li>
                                        <li class="paginate_button previous" th:if="${page.isFirstPage}"><a href="javascript:">第一页</a></li>
                                        <li class="paginate_button previous" th:if="${!page.isFirstPage}"><a
                                                th:href="'javascript:document.forms.ec.pageNum.value='+${page.prePage}+';document.forms.ec.submit();'">上一页</a>
                                        </li>
                                        <li class="paginate_button previous disabled" th:if="${page.isFirstPage}"><a
                                                href="javascript:">上一页</a></li>
                                        <li th:each="i : ${page.navigatepageNums}"
                                            th:class="${i == page.pageNum } ? 'paginate_button active' : 'paginate_button'">
                                            <a th:href="'javascript:document.forms.ec.pageNum.value='+${i}+';document.forms.ec.submit();'"><span
                                                    th:text="${i}"></span></a>
                                        </li>
                                        <li class="paginate_button next" th:if="${!page.isLastPage}"><a
                                                th:href="'javascript:document.forms.ec.pageNum.value='+${page.nextPage}+';document.forms.ec.submit();'">下一页</a>
                                        </li>
                                        <li class="paginate_button next disabled" th:if="${page.isLastPage}"><a href="javascript:">下一页</a>
                                        </li>
                                        <li class="paginate_button next" th:if="${!page.isLastPage}"><a
                                                th:href="'javascript:document.forms.ec.pageNum.value='+${page.pages}+';document.forms.ec.submit();'">尾页</a>
                                        </li>
                                        <li class="paginate_button next" th:if="${page.isLastPage}"><a href="javascript:">尾页</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<script th:inline="javascript">
    $(function(){
        //去添加角色的页面
        $(".create").on("click",function () {
            opt.openWin("/role/create","新增",580,430);
        });
        //去修改角色的页面
        $(".edit").on("click",function () {
            var id = $(this).attr("data-id");
            opt.openWin('/role/edit/' + id,'修改',580,430);
        });
        //删除角色
        $(".delete").on("click",function(){
            var id = $(this).attr("data-id");
            opt.confirm('/role/delete/'+id);
        });
        //分配权限
        $(".assgin").on("click",function () {
            var id = $(this).attr("data-id");
            opt.openWin("/role/assignShow/"+id,'修改',580,430);
        });
    });
</script>
</body>
</html>